<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>随手快递</title>
    <link rel="stylesheet" type="text/css" href="../../AUI/css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../myCss/style.css" />
    <link rel="stylesheet" type="text/css" href="../../font-awesome/css/font-awesome.min.css" />
    <style type="text/css">
        .aui-list-item.wechat-top {
            background-color: #f3f3f7;
        }
        .aui-list .wechat-avatar {
            width:3rem;
        }
        .wechat-avatar .aui-row-padded {
            background-color: #dddee0;
            padding: 0.1rem;
            border-radius: 0.2rem;
            margin-left: -0.05rem;
            margin-right: -0.05rem;
        }
        .wechat-avatar .aui-row-padded [class*=aui-col-xs-] {
            padding: 0.05rem;
        }
        .wechat-avatar,
        .wechat-avatar > img {
            border-radius:0.2rem;
        }
    </style>
</head>
<body style="font-family: 微软雅黑">
<header class="aui-bar aui-bar-nav" id="aui-header">
    <a class="aui-btn aui-pull-left" tapmode  onclick="history.back();">
        <span class="aui-iconfont aui-icon-left"></span>
    </a>
    <div class="aui-title">好友列表</div>
    <div class="aui-btn aui-pull-right" onclick="location.href='../find/addFriend.html'" ><span class="fa fa-user-plus fa-lg"></span></div>
</header>
<div class="aui-searchbar" id="search" style="margin-top: 45px">
    <div class="aui-searchbar-input aui-border-radius" tapmode >
        <i class="aui-iconfont aui-icon-search"></i>
        <form action="javascript:search();">
            <input type="search" placeholder="搜索" id="search-input">
        </form>
    </div>
</div>
<section class="aui-content">
    <div id="letter" ></div>
    <div class="sort_box">
       
      
    </div>
    <div class="initials">
        <ul>
            <li><span class="fa fa-search"></span></li>
        </ul>
    </div>
</section>
</body>
<script type="text/javascript" src="../../AUI/script/api.js" ></script>
<script type="text/javascript" src="../../myJs/jquery.min.js" ></script>
<script src="../../myJs/jquery.cookie.js"></script>

<script type="text/javascript">
    apiready = function () {
    }
    
    var data = {
            "code": 200,
            "msg": [
               {
                    "userId": "1",
                    "headPortraitUrl": "../../myImage/4.jpg",
                    "nickname": "小小1",
                    "comment": "尝试了一下随手快递！！！真的懒人必备！！！",
                    "time": "2分钟",
                    "share": "1",
                    "chat": "1",
                    "good":"2",
                    "img":["../../myImage/g1.jpg"]
                }

            ]

        }
        $(function(){
            viewFriend(data);
        });
    
    function viewFriend(data){
    	$.each(data.msg,function(num,data){
    		$(".sort_box").append(' <div class="sort_list">\
            <div class="num_logo">\
                <img src="'+data.headPortraitUrl+'" alt="">\
            </div>\
            <div class="num_name">'+data.nickname+'</div>\
        </div>');
    	})
    }
</script>

<script type="text/javascript" src="../../myJs/jquery.charfirst.pinyin.js" ></script>
<script type="text/javascript" src="../../myJs/sort.js" ></script>
</html>